<nz-row>
  <nz-col>
    <button nzType="primary" nz-button
      (click)="treeStatusChange('isExpanded', !isExpanded)">{{ (isExpanded) ? '全部收合' : '全部展開' }}</button>
    <button nzType="primary" nz-button (click)="save()" *ngIf="providerName !== 'D' && providerName !== 'C'">儲存變更</button>
    <button nzType="danger" nz-button (click)="reLoadData()">取消變更</button>
  </nz-col>
</nz-row>
<div class="my-md"></div>
<nz-spin [nzSpinning]="loading">
  <div style="background-color:#FFF">
    <fs-ng-alain-tree
      [tree]="treeData"
      [treeItem]="treeData"
      [showCountType]="1"
      [nzDefaultExpandAll]="isExpanded"
      [nzCheckable]="false"
      [showCheckAll]="false"
      [leafNodes]="true"
      [nzDraggable]="false"
      [nzShowLine]="true"
      [nzDefaultSearch]="true"
      [nzTreeTemplate]="nzTreeTemplate">
    </fs-ng-alain-tree>
  </div>
</nz-spin>
<nz-back-top></nz-back-top>

<ng-template #nzTreeTemplate let-node>
  <span
    class="custom-node"
    [class.node-active]="seletedNode == node.key"
    [class.textColor]="editedData[node.key] != undefined"
    (click)="clickItem(node)"
    [innerHtml]="searchColor(node)">
  </span>
  <br />
  <div *ngIf="seletedNode == node.key && node.isLeaf">
    <div [formGroup]="form" style="margin: 1em 0px">
      <nz-form-control nzExtra="SettingName：{{ node.origin.name }}">
        <ng-container [ngSwitch]="node.origin.properties.Type">
          <ng-container *ngSwitchDefault>
            <fs-ng-alain-json-editor [form]="form" [data]="node.origin.id"></fs-ng-alain-json-editor>
          </ng-container>
          <nz-input-number *ngSwitchCase="'Int16'" style="width: 100%;" [formControlName]="node.origin.id" [nzStep]="1">
          </nz-input-number>
          <nz-input-number *ngSwitchCase="'Int32'" style="width: 100%;" [formControlName]="node.origin.id" [nzStep]="1">
          </nz-input-number>
          <nz-input-number *ngSwitchCase="'Int64'" style="width: 100%;" [formControlName]="node.origin.id" [nzStep]="1">
          </nz-input-number>
          <nz-input-number *ngSwitchCase="'Float'" style="width: 100%;" [formControlName]="node.origin.id">
          </nz-input-number>
          <nz-input-number *ngSwitchCase="'Decimal'" style="width: 100%;" [formControlName]="node.origin.id">
          </nz-input-number>
          <label nz-checkbox *ngSwitchCase="'Boolean'" [formControlName]="node.origin.id"></label>
          <input *ngSwitchCase="'String'" nz-input style="width: 100%;" nzSize="default"
            [formControlName]="node.origin.id" />
        </ng-container>
      </nz-form-control>
    </div>
  </div>
</ng-template>